<template>
  <div class="hospital">
    <my-header :h="headMsg"></my-header>
    <div class="toolbar">
      <div class="right">
        <input id="search_hos" type="text" placeholder="请输入医生姓名进行搜索">
      </div>
    </div>
    <ul class="hos-list">
      <div class="hospital-item" @click="$router.push('/hospitailDetail/id')">
        <img src="../assets/doctor.png" alt="icon">
        <div class="center">
          <span class="name">医院名称</span>
          <span class="address">地址</span>
        </div>
        <span class="badge">三甲</span>
      </div>
    </ul>
    
  </div>
</template>

<script>
import Vue from "vue";

import http from "../js/api";
import myHeader from "./base/my-header";
import { VueLoading } from "vue-loading-template";
import { Popup } from 'mint-ui';

export default {
  name: "home",
  data() {
    return {
      curCity:1,
      popupVisible:false,
      searchList:[],
      headMsg: {
        title: "搜索医生",
        fixed: true
      }
    };
  },
  components:{myHeader,Popup},
  created() {
    
  },
  mounted() {

  },
  methods:{
    selectCity(id){
      this.curCity=id
      this.popupVisible=false

    }
  },
  computed: {
    curCityName(){
      let item = this.cityList.find(e=>e.id==this.curCity)
      console.log(item)
      return item.name
    }
  },

  filters: {
    
  },
  beforeRouteEnter(to,from,next){
    if (from.name=='cityPicker') {
      
      console.log(from)
    }
    next()
  },
};
</script>

<style scoped lang="scss">
.pop-content{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .on{
    border-color: rgba(45,127,252,1);
    color: #2D7FFC;
  }
  *{
    width:5.25rem;
    margin: .35rem;
    line-height:1.75rem;
    text-align: center;
    border:1px solid #666666;
    border-radius:.25rem;
    font-size:.75rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
}
.popup{
  width: 100%;
}
.pop-title{
line-height:2rem;
text-align: center;
box-shadow:0px 1px 0px 0px rgba(230,230,230,1);
  font-size:.85rem;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(51,51,51,1);
}
.hospital{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #edf2fc;
}

span.locate-city {
    display: inline-block;
    min-width: 3em;
    max-width: 5em;
    white-space: nowrap;
    overflow: hidden;
    font-size: .75rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
}

input#search_hos {
    width: 100%;
    height:1.4rem;
    background:rgba(255,255,255,1);
    border:1px solid rgba(230, 230, 234, 1);
    border-radius:.25rem;
    font-size:.65rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    text-indent: 2em;
    background-image: url(../assets/ico-search.png);
    background-repeat: no-repeat;
    background-size: .625rem;
    background-position: .5em center;
}

.toolbar {
    display: flex;
    align-items: center;
    height:2.25rem;
    background:rgba(255,255,255,1);
    padding: 0 .8rem;
    box-shadow:0px 1px 0px 0px rgba(221,221,221,1), 0px -1px 0px 0px rgba(221,221,221,1);

    .right{
      flex-grow: 1;
    }
    .left{
      display: flex;
      align-items: center;
      img{
        padding-right: .4em;
        margin: 0;
        vertical-align: middle;
        
      }
      .locate{
        width:.65rem;
        height:.8rem;
      }
      .pulldown{
        padding-left: .4em;
        width:.6rem;
        height:.3rem;
      }
    }
}

span.locate-city {
    font-size: .75rem;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
}


.hospital-item{
  height:3.75rem;
  background:rgba(255,255,255,1);
  box-shadow:0px -1px 0px 0px rgba(216,222,235,1), 0px 1px 0px 0px rgba(216,222,235,1);
  display: flex;
  align-items: center;
  padding: 0 .75rem;

  .center{
    flex-grow:1;
    margin-left: .5rem;
  }
  span.badge {
    width: 1.5rem;
    height:.8rem;
    background:rgba(70,211,169,1);
    border-radius:.25rem;
    color: white;
    font-size: .6rem;
  }

  span.address {
      color: rgba(153,153,153,1);
      font-size: .65rem;
      display: block;
  }

  span.name {
      font-size: .85rem;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      color:rgba(51,51,51,1);
  }

  img {
      width: 2.25rem;
      height:2.25rem;
      border-radius: 2.25rem;
  }
}
.hos-list{
  margin-top: .35rem;
  
}

</style>
